//该组件展示TableBar的子组件
<template>
  <div class="item-tableBar" @click="goToPage">
    <!-- 
      ItemTabBar的图片显示部分
      这里定义显示图片的2个slot插槽,通过当前ItemTabBar是否别激活来显示不同的图片 
    -->
    <div v-if="!isActive">
      <slot name="item-icon-unactive"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <!-- ItemTabBar的文字显示部分,如果被激活,则给文字加上激活的样式,没激活则取消 -->
    <div :style="styleActive">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //定义跳转的路径,需要通过父组件传递过来
    path: String,
    //定义传递的文字激活颜色值
    textActive: {
      //定义传递颜色值为String类型
      type: String,
      //如果没传则给定默认值为红色
      default: "red"
    }
  },
  data() {
    return {};
  },
  methods: {
    //点击跳转
    goToPage() {
      //当前ItemTabBar没有激活时点击跳转,激活的不做任何处理
      if (!this.isActive) {
        this.$router.replace(this.path);
      }
    }
  },
  computed: {
    //这里值得学习的地方,通过计算属性来确定当前ItemTabBar是否激活
    isActive() {
      //当前处于活跃路由的path属性中是否包含当前ItemTabBar的path,如果包含则证明当前ItemTabBar被激活,如果不包含则没有被激活
      return this.$route.path.indexOf(this.path) !== -1;
    },
    //激活的样式
    styleActive() {
      //判定当前ItemTabBar是否处于激活状态,激活则绑定激活颜色的类名
      return this.isActive ? { color: this.textActive } : {};
    }
  }
};
</script>

<style scoped>
.item-tableBar {
  flex: 1;
  text-align: center;
}

img {
  margin-top: 3px;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-bottom: 2px;
}
</style>
